<template>
	<div class="authority">
		<a-table row-key="id" :columns="columns" :pagination="pagination" :loading="loading" :data-source="items" @change="tableChange">
			<template #title>
				<div class="flex justify-between">
					<div class="flex">
						<a-button type="primary" @click="$refs.form.add()" v-access="['QuesBank:save']">
							<template #logo>
								<PlusOutlined />
							</template>
							新增
						</a-button>
					</div>
					<a-form layout="inline" :model="searchData" @finish="fetch({...searchData, page: pagination.current})">
						<a-form-item>
							<a-input v-model:value="searchData.name" placeholder="真题名称">
							</a-input>
						</a-form-item>
						<a-form-item>
							<a-button type="primary" html-type="submit">
								搜索
							</a-button>
						</a-form-item>
					</a-form>
				</div>
			</template>
			<template #bodyCell="{ record, column }">
				<a-space wrap v-if="column.dataIndex === 'operation'">
					<a-button class="text-xs" size="small" @click="$refs.form.edit(record)">编辑</a-button>
					<a-button class="text-xs" type="primary" size="small" @click="$router.push('ques?bank_id=' + record.id)">试题</a-button>
					<a-popconfirm title="确认删除？" @confirm="remove(record)">
						<a-button class="text-xs" size="small">删除</a-button>
					</a-popconfirm>
				</a-space>
			</template>
		</a-table>
		<ques-bank-edit ref="form" @change="updated" />
	</div>
</template>
<script lang="ts">
import {page, list} from "@/mixins"
import QuesBankEdit from "./QuesBankEdit.vue"

export default {
	mixins: [page, list],
	components: {QuesBankEdit},
	data() {
		return {
			showForm: false,
			loadPath: 'ques-bank',
			columns: [
				{
					title: '题库名称',
					dataIndex: 'name',
				},
				{
					title: '类型',
					dataIndex: 'level',
					customRender: ({text}) => ['---','初级','中级','高级'][text] ?? '---'
				},
				{
					title: '年份',
					dataIndex: 'year'
				},
				{
					title: '状态',
					dataIndex: 'status',
					customRender: ({text}) => ['---','正常','关闭'][text] ?? '---'
				},
				{
					width: 200,
					title: '操作',
					align: 'center',
					dataIndex: 'operation',
				},
			],
			formData: {
				id: undefined,
				name: '',
				subject_id: 0,
				subject_name: '',
				year: '',
				type: 0
			},
			searchData: {
				name: ''
			}
		}
	},
	mounted () {
		this.fetch({...this.searchData, page: this.pagination.current})		
	},
	methods: {
	}
}
</script>